<template>
	<div id="appSiteMap" class="neary_img app_site_map" :style="{backgroundImage: 'url(' + mapImg + ')', backgroundSize:'cover'}" @click="skiptomap">
		<div class="near_marker">
			<div class="thmarker">
				<p>
					附近有
					<span>{{userInfo.BuildingSite.total}}</span>个工地
				</p>
				<img :src="constant.imgUrl + 'publicicon/localposition.png'" alt class="local_marker" />
			</div>
		</div>
		<div class="markerlistf">
			<div class="markerlist_left">
				<p class="maker_title">{{userInfo.BuildingSite.list[0].case_name}}</p>
				<p class="marker_room">
					<span>{{userInfo.BuildingSite.list[0].room==''?'-':userInfo.BuildingSite.list[0].room}}</span> |
					<span>{{userInfo.BuildingSite.list[0].acreage==''?'-':userInfo.BuildingSite.list[0].acreage}}</span> |
					<span>{{userInfo.BuildingSite.list[0].price==''?'-':userInfo.BuildingSite.list[0].price}}</span> |
					<span class="mdistance" v-if="userInfo.BuildingSite.list[0].distance!==''">距离你{{userInfo.BuildingSite.list[0].distance ?userInfo.BuildingSite.list[0].distance : '-' }}km</span>
				</p>
			</div>
			<div class="markorder" @click.stop="skiporder">预约参观</div>
		</div>
	</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
export default {
	name: 'site-map',
	data() {
		return {
			// 附近工地
			mapImg: '',
			constant: this.$constant
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getBasicUser' })
	},
	mounted() {
		this.getlocation()
	},
	methods: {
		skiptomap() {
			// 到地图列表页面
			this.$router.push({
				name: 'Mapindex',
				query: {
					owner_user_id: this.$route.query.owner_user_id
				}
			})
		},
		skiporder() {
			// 预约参观
			this.$emit('visitCall')
		},
		// 获取经纬度
		getlocation() {
			var userRegion = uni.getStorageSync('userRegion')
			if (this.userInfo.BuildingSite.list.length > 0) {
				var subscribe = this.userInfo.BuildingSite.list[0]
				var lat = subscribe.lat
				var lng = subscribe.lng
				this.mapImg = `https://apis.map.qq.com/ws/staticmap/v2/?center=${lat},${lng}&zoom=10&size=600*300&scale=2&maptype=roadmap&key=6Y5BZ-YFUHU-2S3VM-2Y6XW-HWZM5-BWBKJ`
			}
		}
	}
}
</script>
<style lang="scss" scoped>
	.app_site_map {
		width: 100%;
		height: 550px;
		border-radius: 20px;
		position: relative;
		.near_marker {
			width: 334px;
			height: auto;
		}
		.thmarker {
			width: 334px;
			height: 91px;
			float: left;
			font-size: 30px;
			border-radius: 10px;
			margin-left: 208px;
			margin-top: 62px;
			background: white;
			line-height: 90px;
			text-align: center;
			background-size: 100%;
			position: relative;
			box-shadow: 0px 2px 10px #cccccc;
		}
		.thmarker p {
			background: url($imgUrl+'login/right.png') right 20px center / 15px 28px no-repeat;
		}
		.thmarker p span {
			color: #ff9000;
		}
		.thmarker::after {
			content: '';
			border-left: 15px solid transparent;
			border-right: 15px solid transparent;
			border-top: 15px solid white;
			position: absolute;
			bottom: -15px;
			left: 48%;
			margin-left: -10px;
		}
		.local_marker {
			width: 56px;
			height: 56px;
			clear: both;
			float: left;
			margin-left: 135px;
			margin-top: 15px;
		}
		.markerlistf {
			width: 90%;
			height: 130px;
			background: white;
			border-radius: 10px;
			position: absolute;
			bottom: 20px;
			left: 5%;
		}

		.markerlist_left {
			float: left;
			width: 65%;
			margin-top: 30px;
			margin-left: 30px;
		}

		.markerlist_left .maker_title {
			font-size: 30px;
			font-weight: bold;
			color: #333333;
			display: -webkit-box;
			word-break: break-all;
			/*! autoprefixer: off */
			-webkit-box-orient: vertical;
			/* autoprefixer: on */
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.markerlist_left .marker_room {
			margin-top: 10px;
			font-size: 24px;
			color: #999999;
			display: -webkit-box;
			word-break: break-all;
			/*! autoprefixer: off */
			-webkit-box-orient: vertical;
			/* autoprefixer: on */
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.markerlist_left .mdistance {
			color: #ff9000;
		}

		.markorder {
			float: right;
			width: 140px;
			height: 60px;
			color: #3a1b04;
			margin-top: 36px;
			font-size: 24px;
			text-align: center;
			line-height: 60px;
			border-radius: 30px;
			background: #ffd11a;
			margin-right: 30px;
		}
	}
</style>

